{% extends 'base/base.html' %}
{% load my_filters %}
{% block title %}
    详情
{% endblock %}

{% block css %}
    <style>
    .collect{
        float: right;
    }

    .comments{
        display: flex;
        flex-direction: column;
    }
    .comment{
        display: flex;
        flex-direction: column;
    }

    .info{
        display: none;
    }
    </style>
{% endblock %}


{% block js %}
    <script>
        $(".collect").click(function (){
            $.ajax({
                url: "/operate/collect/",
                method: "post",
                data:{
                    "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                    "article": {{ object.id }},
                    "user": {{ request.user.id }}
                },
                success:function (res){
                    if(res.msg === "收藏成功"){

                        $(".collect").attr("src", "/static/img/collect2.png")
                        alert("收藏成功")

                    }
                    else if(res.msg === "取消收藏成功"){
                        $(".collect").attr("src", "/static/img/collect.png")
                        alert("取消收藏成功")


                    }
                },
                error:function (err){
                    console.log(err, "----")
                }

            })
        })
    </script>

    <script>
        $("#submit_btn").click(function (){
            let content = $("#id_content").val();
            if(content.length>0){
                $.ajax({
                    method: "post",
                    url: "/operate/add_comment/",
                    data:{
                        "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                        "article": {{ object.id }},
                        "user": {{ request.user.id }},
                        "content": content,
                    },
                    success: function (res){
                        console.log(res, "===")

                        $(".comments").append(`
                             <div class="comment">
                                <h3 style="background: url('${res.data.head }') no-repeat; background-size: contain; padding-left: 20px">
                                    ${ res.data.username }
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </h3>
                                <div>${res.data.content}</div>
                            </div>

                        `)
                    }
                })
            }
            else {
                alert("还没有填写评论信息")
                $("#id_content").focus();
            }
        });
    </script>

    <script>
        $(".comments").on("click", '.glyphicon-remove', function (){

            $.ajax({
                method:"post",
                url: "/operate/delete_comment/",
                data:{
                     "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                    "comment_id": $(this).attr("id").slice(15)
                },
                success: (res)=>{
                    console.log(res)
                    if(res.code === 0){
                        $(this).parent().parent().remove();
                    }
                }
            })
        })


    </script>

    <script>
        $(".comments").on("click", ".replay", function (){
            $(this).parent().next().css({
                "display": "block"
            })
        })
    </script>

    <script>

        $(".comments").on("click", ".add_sub_commit", function (){
            let textarea = $(this).prev().children()[0];
            if(textarea.value > 0){
                $.ajax({
                      method: "post",
                    url: "/operate/add_comment/",
                    data:{
                        "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                        "article": {{ object.id }},
                        "user": {{ request.user.id }},
                        "content": textarea.value,
                        "parent": $(this).attr("id").slice(10)
                    },
                    success: (res)=>{
                        console.log(res, "===",  $(this).parent())
                        $(this).parent().css({
                            "display": "none"
                        })


                        $(this).parent().parent().append(`
                            <span>${res.data.username} 回复  ${res.data.parent_username} : ${res.data.content}</span>
                        `)

                    }
                })
            }
            else{
                 alert("还没有填写评论信息")
                 $(textarea).focus();
            }
            console.log(textarea.value)

        })
    </script>
{% endblock %}

{% block main %}




<div class="panel panel-default">
    {% csrf_token %}
  <div class="panel-heading">{{ object.title }}
  {% if requset.user.is_authenticated %}
      {% if object|has_collected:request.user %}
      <img class="collect" src="/static/img/collect2.png" alt="">
        {% else %}
      <img class="collect" src="/static/img/collect.png" alt="">

      {% endif %}

  {% endif %}
  </div>
  <div class="panel-body">
    {{ object.content|safe }}
      <hr>
        <div class="comments">
            {% for c in comments  %}
                <div class="comment">
                        <h3 style="background: url('/media/{{c.user.head }}') no-repeat; background-size: contain; padding-left: 20px">
                            {{ c.user.username }}
                                {% if request.user.is_authenticated %}
                                {% if request.user == c.user  %}
                                <span  id="delete_comment_{{ c.id }}" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                {% else %}
                                     <span class="btn btn-default btn-xs replay">回复</span>

                                {% endif %}
                            {% endif %}
                        </h3>
                        <div class="info">
                            {% if request.user.is_authenticated %}
                                 <div class="form-group">
                                     <textarea class="form-control" name=""  cols="30" rows="3"></textarea>
                                 </div>
                                 <button id="parent_id_{{ c.id }}" class="add_sub_commit" type="submit">提交评论</button>
                                    <a class="btn btn-success" href="{% url 'main:index' %}">取消</a>
                            {% endif %}
                        </div>



                        <div>{{ c.content }}</div>
                        {% if c.get_replays|length > 0 %}
                            {% for r in c.get_replays %}
                                <span>{{ r.user.username }} 回复 {{ r.parent.user.username }} : {{ r.content }}</span>

                            {% endfor %}
                        {% endif %}

                </div>

            {% endfor %}

        </div>

      <hr>

      {% if request.user.is_authenticated %}

            {% csrf_token %}
            <div class="form-group">
                {{ form.content.label_tag }}
                {{ form.content }}
            </div>
            <button id="submit_btn" type="submit">提交评论</button>
            <a class="btn btn-success" href="{% url 'main:index' %}">取消</a>



      {% else %}
        <a class="btn btn-default" href="{% url 'user:login' %}?next={{ request.path }}" role="button">去登录</a>
      {% endif %}
  </div>
</div>


{% endblock %}


